<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dropSpringback-Test</title>
    <style>
        body {
            height: 100%;
            margin: 0px;
            background-color: aquamarine;
        }

        .drop {
            position: relative;
            margin: 50px auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(54, 54, 54);
        }

        .floor {
            position: relative;
            top: 150px;
            margin: 0px auto;
            width: 1000px;
            height: 20px;
            background-color: rgb(255, 121, 121);
        }

        .btn_dropSpringback {
            position: absolute;
            top: 30%;
            left: 60%;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="drop"></div>
    <div class="floor"></div>
    <button class="btn_dropSpringback">点击掉落</button>



    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>
        const drop = document.querySelector('.drop');
        const btnDropSpringback = document.querySelector('.btn_dropSpringback');
        let flag = true;

        /*  dropSpringback(): 掉落回弹动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: start: 初始位置，值为小于等于0，类型number
            参数三: end: 终点位置，类型number
            参数四: step: 掉落后回弹的次数取值范围为[0,3]
            参数五: callback: 可选，动画完成后的回调函数
        */

        btnDropSpringback.addEventListener('click', () => {
            if (flag) {
                drop.style.transform = '';
                flag = false;
                dropSpringback(drop, 0, 200, 3, () => {
                    flag = true;
                    console.log('ok');
                });
            }
        });
    </script>
</body>

</html>